<template>
  <div>
    <div id="main" style="width: 100%; height: 600px"></div>
    <div id="main2" style="width: 100%; height: 600px"></div>
    <div id="main3" style="width: 100%; height: 600px"></div>
    <div id="main4" style="width: 100%; height: 600px"></div>
    <div id="main5" style="width: 100%; height: 600px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { get_stock_excel, post_stock_excel } from "./axios_api/api";
export default {
  data() {
    return {
      charts: "",
      /*  opinion: ["1", "3", "3", "4", "5"],*/
      opiniondata: [],
      opiniontimeL: [],
      opinionmin: 0,
      opinionmax: 0,
      datalt1: [],
      timelt1: [],
      maxsdata1: 0,
      minsdata1: 0,
      datalt2: [],
      timelt2: [],
      maxsdata2: 0,
      minsdata2: 0,
      td_data: [],
      td_data2: [],
      list_time: [],
    };
  },
  methods: {
    stockExcel() {
      get_stock_excel().then((resp) => {
        let the_data = resp.data;
        // 全局数据
        this.opiniondata = the_data.data_l;
        this.opiniontimeL = the_data.time_l;
        this.opinionmin = the_data.mins_data;
        this.opinionmax = the_data.maxs_data;
        this.datalt1 = the_data.data_lt1;
        this.timelt1 = the_data.time_lt1;
        this.maxsdata1 = the_data.maxs_data1;
        this.minsdata1 = the_data.mins_data1;
        this.datalt2 = the_data.data_lt2;
        this.timelt2 = the_data.time_lt2;
        this.maxsdata2 = the_data.maxs_data2;
        this.minsdata2 = the_data.mins_data2;
        this.td_data = the_data.td_data;
        this.$nextTick(function () {
          this.drawLine("main");
          this.drawLineTwo("main2");
          this.drawLineThree("main3");
          this.drawLineSix("main4");
        });
      });
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "全部数据趋势",
          left: 0,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["交易金额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: this.opiniontimeL,
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "交易金额",
            type: "line",
            stack: "总量",
            data: this.opiniondata,
          },
        ],
      });
    },
    drawLineTwo(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "9:30:00---9:35:00趋势",
          left: 0,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          data: ["交易金额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: this.timelt1,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          splitNumber: 20,
          min: "dataMin",
          max: "dataMax",
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "交易金额",
            type: "line",
            stack: "总量",
            data: this.datalt1,
          },
        ],
      });
    },
    drawLineThree(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "9:35:00---9:40:00趋势",
          left: 0,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          data: ["交易金额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },

        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: this.timelt2,
          scale: true,
          boundaryGap: false,
          axisLine: { onZero: false },
          splitLine: { show: false },
          splitNumber: 20,
          min: "dataMin",
          max: "dataMax",
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "交易金额",
            type: "line",
            stack: "总量",
            data: this.datalt2,
          },
        ],
      });
    },
    drawLineSix(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "9:35:00---9:40:00数据差",
          left: 0,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: ["5分K"],
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          data: ["09:35:00", "09:40:00"],
          // scale: true,
          // boundaryGap: false,
          // axisLine: { onZero: false },
          // splitLine: { show: false },
          // splitNumber: 20,
          min: "dataMin",
          max: "dataMax",
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "5分K",
            type: "candlestick",
            data: this.td_data,
            itemStyle: {
              color: "#ec0000",
              color0: "#00da3c",
              borderColor: "#8A0000",
              borderColor0: "#008F28",
            },
          },
        ],
      });
    },
    drawLineFour(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "全部数据差",
          left: 0,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: ["5分K"],
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%",
        },
        xAxis: {
          type: "category",
          data: this.list_time,
          // scale: true,
          // boundaryGap: false,
          // axisLine: { onZero: false },
          // splitLine: { show: false },
          // splitNumber: 20,
          min: "dataMin",
          max: "dataMax",
        },
        yAxis: {
          scale: true,
          splitArea: {
            show: true,
          },
        },
        series: [
          {
            name: "日K",
            type: "candlestick",
            data: this.td_data2,
            itemStyle: {
              color: "#ec0000",
              color0: "#00da3c",
              borderColor: "#8A0000",
              borderColor0: "#008F28",
            },
          },
        ],
      });
    },
    stockExcelAll() {
      post_stock_excel().then((resp) => {
        let the_data = resp.data;
        this.td_data2 = the_data.td_data;
        this.list_time = the_data.list_time;
        this.$nextTick(function () {
          this.drawLineFour("main5");
        });
      });
    },
  },
  //调用
  mounted() {
    this.stockExcel();
    this.stockExcelAll();
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
